<head>
    <title>三国杀打小抄</title>
            <meta charset=UTF-8> 
          <style type=text/css> 
              ::-webkit-scrollbar{width: 5px; height: 12px;} 
              ::-webkit-scrollbar-track{border: 1px solid rgb(5,5,5);} 
              ::-webkit-scrollbar-thumb{background: rgb(95,86,63);} 
              ::-webkit-scrollbar-thumb:hover{background: rgb(44,44,44);}
              * {
                  width: 100%;
                  margin: 0;
                  padding: 0;
                  font-size: 15px; /* 默认字体大小，可以根据需要调整 */
              }

              @media screen and (min-width: 500px) {
                  * {
                      font-size: 1em; /* 在屏幕宽度大于500px时应用的字体大小 */
                  }
              }

              body { 
                  width: 100%;
                  background: rgb(40, 40, 40);
                  background-size: cover; /* 背景图的适应方式，可以根据需求调整 */
                  color: #f2de9c; 
                  display: flex; 
                  flex-direction: column; 
                  margin: 0px; 
                  user-select:none;
              } 
              .nav { 
                  width: 100%; 
                  background: rgb(40, 40, 40); 
              } 
              .nav1 {
                  font-weight: bolder;

                  height: 20px; 
                  width: 100%; 
                  float: center; 
                  text-align: center;
                  color: #f2de9c; 
                  background: rgb(40, 40, 40);s
                  margin-right: 15px; 
                  display: block; 
              } 
              .nav2 { 
                  height: 20px; 
                  width: 49%; 
                  float: right; 
                  text-align: center; 
                  color: #f2de9c; 
                  background: rgb(40, 40, 40); 
                  margin-left: 3px; 
                  border: 1px solid #f2de9c; 
                  display: block; 
                  border-radius: 5px; 
              } 
              .nav2:hover { 
                  color: #f2de9c; 
                  background: rgb(55, 40, 32); 
                  border: 1px solid #f2de9c; 
              } 
              .nav2:focus { 
                  background: rgb(55, 40, 32); 
                  box-shadow: 1px 1px 3px #f2de9c ; 
              } 
              .content { 
                  width: 100%; 
                  float: right; 
              }
              .orderAndShouPai { 
                  width: 100%; 
                  overflow: hidden; 
                  display: inline-block; 
              } 
              .order { 
                  width: 100%; 
                  overflow: hidden; 
              } 
              .orderContainer { 
                  width: 100%; 
                  overflow: hidden; 
              } 
              .order-head {
                  font-weight: bolder;
                  width: 10%; 
                  height: 25px; 
                  float: left; 
                  text-align: center; 
                  color: #f2de9c; 
                  margin-left: 3px; 
              } 
              .order-body:empty { 
                  padding: 5px; 
                  height: 35px; 
                  width: 81%;
                  float: right; 
                  display: block; 
                  box-shadow:  1px 1px 3px ; 
                  margin: 1px; 
                  overflow: hidden; 
                  border-radius:5px;
              } 
              .order-body {
                  padding: 5px; 
                  height: auto; 
                  width: 81%;
                  float: right; 
                  display: block; 
                  box-shadow:  1px 1px 3px ; 
                  margin: 1px; 
                  overflow: hidden; 
                  border-radius:5px;
              }

              .shoupai { 
                  --shoupaiR-width: 35px;
                  font-weight: bolder;
                  margin-right: calc(28px - var(--shoupaiR-width));
                  float: left; 
                  width: var(--shoupaiR-width);
                  height: 40px;
                  border: 1px solid black; 
                  text-align: center;
                  color: black; 
                  background: rgb(200, 200, 166); 
                  box-shadow: inset 3px 3px 6px #111;
              } 
              .shoupaiR {
                  --shoupaiR-width: 35px;
                  font-weight: bolder;
                  margin-right: calc(28px - var(--shoupaiR-width));
                  float: left; 
                  width: var(--shoupaiR-width); 
                  height: 40px;
                  border: 1px solid black; 
                  text-align: center;
                  color: red; 
                  background: rgb(200, 200, 166); 
                  box-shadow: inset 3px 3px 6px #111;
              }
              .knownShouPai{
                  border:1px rgb(40,40,40) solid;
                  animation: blink 1s;
                  animation-iteration-count: infinite ;
              }
              .knownCardsInHand{
                  text-align: center;
                  position: relative;
                  overflow: hidden;
                  /*display: none;*/
                  height: 121px;
              }
              .knownCards:empty{
                  text-align: center;
                  position: relative;
                  overflow: hidden;
                  /*display: none;*/
              }
              .knownCards{ 
                  width: 81%;
                  text-align: center; 
                  position: relative; 
                  overflow: hidden; 
                  height: 121px;
              }
              @keyframes blink { 50% { border-color:#f2de9c ; }  }
              .knownCards:after{ 
                  text-align: center; 
                  content: '场上手牌';
                  position: absolute;
                  bottom: 0;
                  right: 5px;
                  z-index: -1; 
                  font: 800 20px 'Arial Black'; 
                  -webkit-text-fill-color: transparent; 
                  -webkit-text-stroke-width: 1px; 
              } 
               .ding{
                  text-align: center;
                  width: 100%;
                  position: relative;
                  height: auto;
                  /*display: none;*/

              } 
               .dingCards{
                   text-align: center;
                   position: relative;
                   height: auto;
                   min-height: 60px;
                  /*display: none;*/
              } 
              .dingCards:after{ 
                  content: '第一张为牌堆顶';
                  position: absolute;
                  bottom: 0;
                  right: 5px;
                  z-index: -1; 
                  font: 800 20px 'Arial Black'; 
                  -webkit-text-fill-color: transparent; 
                  -webkit-text-stroke-width: 1px; 
              } 
               .di{
                  text-align: center;
                  width: 100%;
                  position: relative;
                  height: auto;
                  /*display: none;*/
              } 
              .diCards{
                  text-align: center;
                  position: relative;
                  height: auto;
                  min-height: 60px;
                  /*display: none;*/

              } 
              .diCards:after{ 
                  content: '第一张为牌堆底';
                  position: absolute;
                  bottom: 0;
                  right: 5px;
                  z-index: -1; 
                  font: 800 20px 'Arial Black'; 
                  -webkit-text-fill-color: transparent; 
                  -webkit-text-stroke-width: 1px; 
       
              } 
              .cardDetail { 
                  width: 100%; 
                  overflow: hidden; 
                  display: inline-block; 
              } 
              .type { 
                  width: 100%; 
                  float: left; 
              } 
              .cardTypeContainer{ 
                  width: 100%; 
                  overflow: hidden; 
                  display: block; 
              } 
              .type-head { 
                  width: 10%; 
                  float: left; 
                  text-align: center; 
                  color: #f2de9c; 
                  margin-left: 3px; 
                  display: block; 
                  overflow: hidden; 
                  cursor: pointer; 
              } 
              .type-body { 
                  padding: 5px; 
                  width: 81%;
                  float: right; 
                  display: block; 
                  box-shadow:  1px 1px 3px ; 
                  margin: 1px; 
                  overflow: hidden; 
                  border-radius:5px;
              } 
              .cardType { 
                  /*font-size: 11px; */
                  width: 25%; 
                  height: 22px; 
                  float: left; 
                  text-align: center; 
                  border: 1px; 
                  margin: 0px; 
                  background: rgb(200, 200, 166); 
                  box-shadow:  inset 1px 1px 3px #000; 
              } 
              .detail { 
                  width: 100%; 
                  float: left; 
                  /*overflow: hidden;*/ 
              } 
              .detail-head {
                  width: 10%;
                  height: 25px;
                  float: left;
                  text-align: center;
                  color: #f2de9c;
                  margin-left: 3px;
              } 
              .detail-body { 
                  padding: 5px; 
                  width: 81%;
                  float: right;
                  display: block; 
                  box-shadow:  1px 1px 3px; 
                  margin: 1px; 
                  border-radius:5px; 
                  overflow: hidden; 
              } 
              .r { 
                  color: rgb(240, 65, 85);
              } 
              .suitRec { 
                  width: 100%; 
                  float: left; 
              }
              .suit { 
                  width: 50%; 
                  float: left; 
              } 
              #shandian { 
                  width: 100%; 
                  float: left; 
              } 
              .function { 
                  width: 50%; 
                  float: left; 
              } 
              .jizhan { 
                  width: 100%; 
                  float: left; 
              } 
              .yanjiao { 
                  width: 100%; 
                  float: left; 
              } 
              .calRes { 
                  width: 100%; 
                  height: 20px;
                  float: left;
                  text-align: center;
                  color: #f2de9c;
                  background: rgb(40, 40, 40);
                  border: 1px solid #f2de9c;
                  display: block;
                  border-radius: 5px;
              } 
             .calRes:hover {
                  color: #f2de9c;
                  background: rgb(55, 40, 32);
                  border: 1px solid #f2de9c;
              }
              .mizhuBtn { 
                  width: 30%;
                  height: 20px;
                  float: left;
                  text-align: center;
                  color: #f2de9c;
                  background: rgb(40, 40, 40);
                  border: 1px solid #f2de9c;
                  display: block;
                  border-radius: 5px;
              } 
             .mizhuBtn:hover {
                  color: #f2de9c;
                  background: rgb(55, 40, 32);
                  border: 1px solid #f2de9c;
              }
              .mizhu { 
                  width: 100%; 
                  height: 20px;
                  float: left;
                  text-align: center;
                  color: #f2de9c;
                  background: rgb(40, 40, 40);
                  margin-left: 3px;
                  border: 1px solid #f2de9c;
                  display: block;
                  border-radius: 5px;
              } 
             .mizhu:hover {
                  color: #f2de9c;
                  background: rgb(55, 40, 32);
                  border: 1px solid #f2de9c;
              }
              #mySeatID1 { 
                  width: 30%;
                  /*display: none; */
                  float: left; 
              } 
              #mySeatID2 {
                  width: 30%;
                  /*display: none; */
                  float: left; 
              } 
              .res { 
                  width: 100%; 
                  float: left; 
              } 
              .tooltip { 
                  position: relative; 
                  display: inline-block; 
                  text-align: center; 
              }
              .tooltiptext {
                  width: 200px; /* 设置 tooltip 宽度，根据需要调整 */
                  visibility: hidden;
                  background-color: black;
                  top: 900px; /* 调整 tooltip 与按钮的垂直距离 */
                  left: 50%; /* 将 left 设置为 50% */
                  transform: translateX(-50%); /* 使 tooltip 水平居中 */
                  color: #f2de9c;
                  text-align: left;
                  padding: 5px 10px; /* 调整 padding 样式 */
                  border-radius: 6px;
                  position: fixed; /* 使用 fixed 定位 */
                  z-index: 1;
              }

              #donate { 
                  position: relative; 
                  color: #f2de9c; 
                  display: inline-block; 
                  text-align: center; 
              }
              .tooltip .tooltiptext {
                  width: 100%;
                  visibility: hidden;
                  background-color: black;
                  top: 50%; /* 将 top 设为 50% */
                  left: 50%;
                  transform: translate(-50%, -50%); /* 使用 transform 属性进行居中 */
                  color: #f2de9c;
                  text-align: left;
                  padding: 5px 0;
                  border-radius: 6px;
                  position: absolute;
                  z-index: 1;
              }

              .tooltip:hover .tooltiptext { 
                  visibility: visible; 
              } 
              .footer { 
                  position: fixed; 
                  bottom: 0; 
                  left: 0; 
                  width: 100%; 
                  text-align: center; 
              } 
              .width { 
                  width: 100%; 
                  height: 5px; 
              } 
          </style>
    <script async src='GA_2.js'></script>

    <script src='GA.js'></script>
    <script src="sidebar.js"></script>
</head>

<body>

   <div class='nav'>
         <div class='nav1' id = 'nav1'>当前牌堆：无</div>

     </div>
    <div class='content' id='content'>
          <div class='orderAndShouPai' id ='orderAndShouPai' >
                  <div class='order' id='button'>
                          <div class='orderContainer'>
                                  <div class='order-head or1' id='or1'>一</div>
                                  <div class='order-body No1' id='1'>
                                          <button class='shoupaiR'>♦6 <br>测试 </button>

                                      </div>
                              </div>
                          <div class='orderContainer'>
                                  <div class='order-head or2' id='or2'>二</div>
                                  <div class=order-body No2 id='2'>
                                          <button class='shoupai'>♦6 <br>卡牌 </button>

                                      </div>
                              </div>
                          <div class='orderContainer'>
                                  <div class='order-head or3' id='or3'>三</div>
                                  <div class=order-body No3 id='3'>
                                          <button class='shoupaiR'>♦6 <br>酒 </button>
                                      <button class='shoupaiR'>♦6 <br>酒 </button>
                                      <button class='shoupaiR'>♦6 <br>酒 </button>
                                      <button class='shoupaiR'>♦6 <br>酒 </button>
                                      <button class='shoupaiR'>♦Q <br>南蛮 </button>
                                      <button class='shoupaiR'>♦6 <br>酒 </button>
                                      <button class='shoupaiR'>♦6 <br>酒 </button>
                                      <button class='shoupaiR'>♦6 <br>酒 </button>
                                      <button class='shoupai'>♦J <br>南蛮 </button>

                                      <button class='shoupai'>♦J <br>南蛮 </button>

                                      <button class='shoupaiR'>♦6 <br>酒 </button>
                                      <button class='shoupaiR'>♦6 <br>酒 </button>
                                      <button class='shoupaiR'>♦6 <br>酒 </button>
                                      <button class='shoupai'>♦J <br>南蛮 </button>
                                      <button class='shoupaiR'>♦6 <br>酒 </button>
                                      <button class='shoupaiR'>♦6 <br>酒 </button>
                                      <button class='shoupaiR'>♦6 <br>酒 </button>
                                      <button class='shoupaiR'>♦6 <br>酒 </button>
                                      <button class='shoupaiR'>♦6 <br>酒 </button>
                                      <button class='shoupaiR'>♦6 <br>酒 </button>
                                      <button class='shoupaiR'>♦6 <br>酒 </button>
                                      <button class='shoupaiR'>♦6 <br>酒 </button>
                                      <button class='shoupaiR'>♦6 <br>酒 </button>

                                  </div>
                              </div>
                          <div class='orderContainer'>
                                  <div class='order-head or4' id='or4'>四</div>
                                  <div class='order-body No4' id='4'></div>
                              </div>
                          <div class='orderContainer'>
                                  <div class='order-head or5' id='or5'>五</div>
                                  <div class='order-body No5' id='5'></div>
                              </div>
                          <div class='orderContainer'>
                                  <div class='order-head or6' id='or6'>六</div>
                                  <div class='order-body No6' id='6'></div>
                              </div>
                          <div class='orderContainer'>
                                  <div class='order-head or7' id='or7'>七</div>
                                  <div class='order-body No7' id='7'></div>
                              </div>
                          <div class='orderContainer'>
                                  <div class='order-head or8' id='or8'>八</div>
                                  <div class='order-body No8' id='8'></div>
                              </div>
                          <div class='orderContainer'>
                                  <div class='order-head knownCardsInHand' id='knownCardsInHand'>场上手牌</div>
                                  <div class='order-body knownCards' id='knownCards'>
                                      <button class='shoupaiR'>♦6 <br>酒 </button>
                                      <button class='shoupaiR'>♦6 <br>酒 </button>
                                      <button class='shoupaiR'>♦6 <br>酒 </button>
                                      <button class='shoupaiR'>♦6 <br>酒 </button>
                                      <button class='shoupaiR'>♦6 <br>酒 </button>
                                      <button class='shoupaiR'>♦6 <br>酒 </button>
                                      <button class='shoupaiR'>♦6 <br>酒 </button>
                                  </div>

                              </div>
                          <div class='orderContainer'>
                                  <div class='order-head ding' id='ding'></div>
                                  <div class='order-body dingCards' id='dingCards'>
                                      <button class='shoupaiR'>♦6 <br>酒 </button>
                                      <button class='shoupaiR'>♦6 <br>酒 </button>
                                      <button class='shoupaiR'>♦6 <br>酒 </button>
                                      <button class='shoupaiR'>♦6 <br>酒 </button>
                                      <button class='shoupaiR'>♦6 <br>酒 </button>
                                      <button class='shoupaiR'>♦6 <br>酒 </button>
                                      <button class='shoupaiR'>♦6 <br>酒 </button>
                                      </div>
                              </div>
                          <div class='orderContainer'>
                                  <div class='order-head di' id='di'></div>
                                  <div class='order-body diCards' id='diCards'>
                                      <button class='shoupaiR'>♦6 <br>酒 </button>
                                      <button class='shoupaiR'>♦6 <br>酒 </button>
                                      <button class='shoupaiR'>♦6 <br>酒 </button>
                                      <button class='shoupaiR'>♦6 <br>酒 </button>
                                      <button class='shoupaiR'>♦6 <br>酒 </button>
                                      <button class='shoupaiR'>♦6 <br>酒 </button>
                                      <button class='shoupaiR'>♦6 <br>酒 </button>
                                      </div>
                              </div>
                      </div>
              </div>
          <div class='cardDetail' id='cardDetail'>
                  <div class=space></div>
                  <div class=detail>
                          <div class='detail-head' id='detail'>
                                  <b>功能</b>
                              </div>
                          <div class='detail-body'>
                                  <div class='suit r' id='heart'>♥红桃 × </div>
                                  <div class='suit' id='spade'>♠黑桃 × </div>
                                  <div class='suit' id='club'>♣梅花 × </div>
                                  <div class='suit r' id='diamond'>♦方片 × </div>
                                  <div class='suit r' id='hongsha'>红杀 × </div>
                                  <div class='suit' id='heisha' n>黑杀 × </div>
                                  <div class='suitRec' id='suit'>乱击/权变花色 </div>
                                  <div class='suitRec' id='suit1'>博图花色 </div>
                                  <div class='function jizhan' id='jizhan'>吉占点数</div>
                                  <div class='function yanjiao' id='yanjiao'>严教小抄</div>
                                  <button class='function mizhuBTN' id='mizhu'>糜竺小抄</button>
                                  <button class='function mizhu mySeatID' id='mySeatID1'>座位：1</button>
                                  <button class='function mizhu mySeatID' id='mySeatID2'>座位：2</button>
                                  <div class='function res' id='res'>结果样式：1+1+1+1 = 4</div>
                              </div>
                      </div>
                  <div class='width'></div>
                  <div class=type>
                          <div class='cardTypeContainer'>
                                  <div class='type-head' id='jiben'><b>基本</b></div>
                                  <div class='type-body type1' id='type1'>
                                          <button class=cardType>12寒冰</button>
                                      </div>
                              </div>
                          <div class='cardTypeContainer'>
                                  <div class='type-head' id='jinnang'><b>锦囊</b></div>
                                  <div class='type-body type2' id='type2'>
                                          <button class=cardType>12寒冰</button>
                                      </div>
                              </div>
                          <div class='cardTypeContainer'>
                                  <div class='type-head' id='zhuangbei'><b>装备</b></div>
                              <div class='type-body type3' id='type3'>
                                  <button class='cardType tooltip'>12寒冰</button>
                                  <span class='tooltiptext'>
                                    这是按钮3的说明内容。<br>
                                    可以包含多行文本或其他元素。
                                </span>
                              </div>

                              </div>
                      </div>
          </div>
<!--        <div class='tooltip' >查看说明-->
<!--                  <span class=tooltiptext>               <div>说明</div>-->
<!--                <li>插件在军争、国战自动打开</li>-->
<!--                <li>牌堆指的是未知牌堆，包括未知手牌和剩余牌堆的牌</li>-->
<!--                <li>洗牌后可以计算出场上未知手牌，相当于攻心全场</li>-->
<!--                <li>严教计算器自动出结果</li>-->
<!--                <li>使用前可以先用演武看看功能</li>-->
<!--                <li>其他牌堆和功能逐步完善，如果没被ban的话</li>-->
<!--                <li>有任何问题或者建议可以添加群：562224095</li>-->
<!--        </span>-->
<!--        </div>-->
        <a href='http://qm.qq.com/cgi-bin/qm/qr?_wv=1027&k=KzXr_lLtDLXPB9uKGaySToCLhWJz6Xxi&authKey=iJ26uPsWz8OOblSauQRSf93zgROEMdZdxPuhHD9hSn8GgfGc%2B54YHgFsLEEF9His&noverify=0&group_code=562224095'
           id='donate' target='_blank'>加群一起玩</a>
        <br>
             <a href='https://afdian.net/@yimadaO_o' id='donate' target='_blank'>请我喝肥宅快乐水</a>

    </div>
</body>